﻿@(Html.DevExtreme().Diagram()
        .ID("diagram")
        .CustomShapes(cs => {
            cs.Add()
                .Category("hardware")
                .Type("internet")
                .Title("Internet")
                .BackgroundImageUrl(Url.Content("~/images/shapes/internet.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Internet")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);

                });
            cs.Add()
                .Category("hardware")
                .Type("laptop")
                .Title("Laptop")
                .BackgroundImageUrl(Url.Content("~/images/shapes/laptop.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Laptop")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("mobile")
                .Title("Mobile")
                .BackgroundImageUrl(Url.Content("~/images/shapes/mobile.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Mobile")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("pc")
                .Title("PC")
                .BackgroundImageUrl(Url.Content("~/images/shapes/pc.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("PC")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("phone")
                .Title("Phone")
                .BackgroundImageUrl(Url.Content("~/images/shapes/phone.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Phone")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("printer")
                .Title("Printer")
                .BackgroundImageUrl(Url.Content("~/images/shapes/printer.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Printer")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("router")
                .Title("Router")
                .BackgroundImageUrl(Url.Content("~/images/shapes/router.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Router")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3);
            cs.Add()
                .Category("hardware")
                .Type("scaner")
                .Title("Scaner")
                .BackgroundImageUrl(Url.Content("~/images/shapes/scaner.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Scaner")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("server")
                .Title("Server")
                .BackgroundImageUrl(Url.Content("~/images/shapes/server.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Server")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("switch")
                .Title("Switch")
                .BackgroundImageUrl(Url.Content("~/images/shapes/switch.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Switch")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
            cs.Add()
                .Category("hardware")
                .Type("wifi")
                .Title("Wi Fi Router")
                .BackgroundImageUrl(Url.Content("~/images/shapes/wifi.svg"))
                .BackgroundImageLeft(0.15)
                .BackgroundImageTop(0)
                .BackgroundImageWidth(0.7)
                .BackgroundImageHeight(0.7)
                .DefaultWidth(0.75)
                .DefaultHeight(0.75)
                .DefaultText("Wi Fi")
                .AllowEditText(true)
                .TextLeft(0)
                .TextTop(0.7)
                .TextWidth(1)
                .TextHeight(0.3)
                .ConnectionPoints(cp => {
                    cp.Add().X(0.5).Y(0);
                    cp.Add().X(0.9).Y(0.5);
                    cp.Add().X(0.5).Y(1);
                    cp.Add().X(0.1).Y(0.5);
                });
        })
        .Toolbox(tb => tb
            .Groups(g => g.Add().Category("hardware").Title("Hardware"))
        )
)

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "@Url.Content("~/SampleData/diagram-hardware.json")",
            dataType: "text",
            success: function(data) {
                $("#diagram").dxDiagram("instance").import(data);
            }
        });
    });
</script>

